<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情侣APP - 设置</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 设置界面 -->
        <div class="screen">
            <div class="screen-title">设置</div>
            <div class="settings-screen">
                <div class="settings-section">
                    <div class="settings-title">账户</div>
                    <div class="settings-item" id="profileSettings">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-user"></i>
                            </div>
                            <div class="settings-item-text">个人资料</div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                    <div class="settings-item" id="privacySettings">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-lock"></i>
                            </div>
                            <div class="settings-item-text">隐私设置</div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
                
                <div class="settings-section">
                    <div class="settings-title">通知</div>
                    <div class="settings-item" id="notificationSettings">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-bell"></i>
                            </div>
                            <div class="settings-item-text">通知设置</div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                    <div class="settings-item" id="reminderSettings">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="settings-item-text">纪念日提醒</div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
                
                <div class="settings-section">
                    <div class="settings-title">应用</div>
                    <div class="settings-item" id="themeSettings">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-palette"></i>
                            </div>
                            <div class="settings-item-text">主题设置</div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                    <div class="settings-item" id="languageSettings">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-language"></i>
                            </div>
                            <div class="settings-item-text">语言</div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                    <div class="settings-item" id="backupSettings">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-cloud"></i>
                            </div>
                            <div class="settings-item-text">数据备份</div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
                
                <div class="settings-section">
                    <div class="settings-title">关于</div>
                    <div class="settings-item" id="aboutUs">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-info-circle"></i>
                            </div>
                            <div class="settings-item-text">关于我们</div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                    <div class="settings-item" id="helpFeedback">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-question-circle"></i>
                            </div>
                            <div class="settings-item-text">帮助与反馈</div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                    <div class="settings-item" id="rateApp">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-star"></i>
                            </div>
                            <div class="settings-item-text">评分</div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
                
                <div class="settings-section">
                    <button class="btn" id="logoutBtn">退出登录</button>
                </div>
                
                <div class="bottom-nav">
                    <div class="nav-item" data-page="dashboard.html">
                        <i class="fas fa-home"></i>
                        <span>主页</span>
                    </div>
                    <div class="nav-item" data-page="calendar.html">
                        <i class="fas fa-calendar"></i>
                        <span>日历</span>
                    </div>
                    <div class="nav-item" data-page="capsule.html">
                        <i class="fas fa-clock"></i>
                        <span>时空胶囊</span>
                    </div>
                    <div class="nav-item active" data-page="settings.html">
                        <i class="fas fa-cog"></i>
                        <span>设置</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
    <script>
        // 页面跳转逻辑
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                const page = this.getAttribute('data-page');
                if (page) {
                    window.location.href = page;
                }
            });
        });
        
        // 设置项点击事件
        document.querySelectorAll('.settings-item').forEach(item => {
            item.addEventListener('click', function() {
                const settingName = this.querySelector('.settings-item-text').textContent;
                alert(`打开${settingName}设置`);
            });
        });
        
        // 退出登录按钮点击事件
        document.getElementById('logoutBtn').addEventListener('click', function() {
            if (confirm('确定要退出登录吗？')) {
                window.location.href = 'index.html';
            }
        });
    </script>
</body>
</html> 